<template>
    <div>
        <!-- 地址根据list对象数组绑定
         @add是新增地址的单击事件
         @edit是修改地址的单击事件
         @select是选中某一个地址的时候的操作-->
        <van-address-list
                v-model="chosenAddressId"
                :list="list"
                default-tag-text="默认"
                @add="onAdd"
                @edit="onEdit"
                @select="onselect"
        />
    </div>
</template>


<script>
    import {Toast} from 'vant';

    export default {
        data() {
            return {
                chosenAddressId: '1',

                //初始的地址
                list: ''

            };
        },


        created() {
            const _this = this
            axios.get('http://localhost:8181/address/list').then(function (resp) {
                _this.list = resp.data.data
            })
        },


        //这里面都是单击事件
        methods: {
            // @add是新增地址的单击事件
            onAdd() {
                this.$router.push('/addressNew')
            },

            // @edit是修改地址的单击事件(用户的地址都保存在item里面)
            //这里修改是把用户选择的地址传递到修改地址页面进行修改
            onEdit(item) {
                let data = JSON.stringify(item)//把对象转换成字符串
                this.$router.push({path: '/addressEdit', query: {item: data}})//这里是把用户选择的地址传递给addressEdit修改地址页面
            },

            // @select是选中某一个地址的时候的操作
            onselect(item) {
                let orderForm = {//用户选中的信息
                    name: item.name,//名字
                    tel: item.tel,//手机号
                    address: item.address,//地址
                    specsId: this.$store.state.specsId,
                    quantity: this.$store.state.quantity
                }
                const _this = this
                axios.post('http://localhost:8181/order/create',orderForm).then(function (resp) {
                    if(resp.data.code == 0){
                        let instance = Toast('下单成功');
                        setTimeout(() => {
                            instance.close();
                            _this.$router.push('/detail?orderId='+resp.data.data.orderId)
                        }, 1000)
                    }
                })
            }


        }
        //上面都是单击事件


    }
</script>